import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as userInfoActionsFromOtherFile from '../../actions/userinfo'
import { hashHistory } from 'react-router';
//本地存储
import { CITYNAME } from '../../config/localStoreKey'
import localStore from '../../util/localStore'
///////引用组件
import Header from '../../components/Header/index.jsx';
import CurrentCity from '../../components/CurrentCity/index.jsx';
import CityList from '../../components/CityList/index.jsx';


class City extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    }
    render() {
        return (
            <div>
                <Header {...{
                    title:'选择城市'
                }}/>
                <CurrentCity
                    {...{
                        cityName:this.props.userinfo.cityName
                    }}
                />
                <CityList
                    {...{
                        changeFn:this.changeCity.bind(this)
                    }}
                />
            </div>
        )
    }

    //修改城市
    changeCity(newCity){
        if(newCity==null){
            return
        }
        //修改redux
        const userinfo = this.props.userinfo;
        userinfo.cityName = newCity;
        this.props.userInfoActions.updata(userinfo);
        //修改localstorage
        localStore.setItem(CITYNAME, newCity) 
        //跳转到首页
        hashHistory.push('/')
    }


}
// -------------------redux react 绑定--------------------

function mapStateToProps(state) {
    return {
        userinfo: state.userinfo
    }
}

function mapDispatchToProps(dispatch) {
    return {
        userInfoActions: bindActionCreators(userInfoActionsFromOtherFile, dispatch)
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(City)